<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>智能口罩</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- <link rel="stylesheet" href="防疫之盾css/防疫之盾.css"> -->
  </head>
  <body>
    <div id="app">
      <h1>智能口罩</h1>
    <div>德阳市罗江区智云优创新科技有限公司</div>

      <div id="info">
        <p>当前温度:</p>
        <p><span id="temperature">--</span></p>
        <p>当前湿度:</p>
        <p><span id="humidity">--</span></p>
        <p>电量:</p>
        <p><span id="battery">98</span>%</p>
      </div>
      <button id="connectBtn">已连接蓝牙</button>
      <br>
      <div>接收数据中...</div>
      <canvas id="myChart"></canvas>
    </div>

    <script>
      const connectBtn = document.getElementById('connectBtn');
      const temperatureEl = document.getElementById('temperature');
      const humidityEl = document.getElementById('humidity');
      const batteryEl = document.getElementById('battery');
      const ctx = document.getElementById('myChart').getContext('2d');

      let bluetoothDevice;
      let chart;

      async function connect() {
        try {
          const options = {
            filters: [{
              services: ['battery_service']
            }]
          };
          bluetoothDevice = await navigator.bluetooth.requestDevice(options);
          const server = await bluetoothDevice.gatt.connect();
          const service = await server.getPrimaryService('battery_service');
          const characteristic = await service.getCharacteristic('battery_level');
          characteristic.addEventListener('characteristicvaluechanged', handleCharacteristicValueChanged);
          await characteristic.startNotifications();
          console.log('Connected to Bluetooth device:', bluetoothDevice.name);
          connectBtn.disabled = true;
        } catch (error) {
          console.error('Bluetooth connection error:', error);
        }
      }

      function handleCharacteristicValueChanged(event) {
        const value = event.target.value;
        const batteryLevel = value.getUint8(0);
        batteryEl.textContent = batteryLevel + '%';
      }

      function updateTemperatureAndHumidity() {
        const temperature = Math.floor(Math.random() * 10) + 20; // 模拟温度
        const humidity = Math.floor(Math.random() * 30) + 50; // 模拟湿度
        temperatureEl.textContent = temperature + '℃';
        humidityEl.textContent = humidity + '%';

        // 更新图表数据
        chart.data.labels.push(new Date().toLocaleTimeString());
        chart.data.datasets[0].data.push(temperature);
        chart.data.datasets[1].data.push(humidity);
        chart.update();
      }

      setInterval(updateTemperatureAndHumidity, 1000); // 定时更新温度湿度

      // 初始化图表
      chart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: [],
          datasets: [{
            data: [],
            label: '温度',
            borderColor: '#ff6384',
            fill: false
          }, {
            data: [],
            label: '湿度',
            borderColor: '#36a2eb',
            fill: false
          }]
        },
        options: {
          responsive: true,
          title: {
            display: true,
            text: '实时温度湿度图表'
          },
          scales: {
            xAxes: [{
              type: 'time',
              display: true,
              scaleLabel: {
                display: true,
                labelString: '时间'
              }
            }],
            yAxes: [{
              display: true,
              scaleLabel: {
                display: true,
                labelString: '数值'
              }
            }]
          }
        }
      });

      connectBtn.addEventListener('click', connect);
    </script>
    body {
    font-size: 16px;
    font-family: 'Helvetica Neue', sans-serif;
    color: #fff;
    margin: 0;
    padding: 0;
    background-image: url('https://images.unsplash.com/photo-1560088199-d1caaec6fc52');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
  
  #app {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(5,129,253, 0.7);
    border: 2px solid #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.3);
  }
  
  h1 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 20px;
  }
  
  #info {
    border: none;
    padding: 10px;
    text-align: center;
    margin-top: 20px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
  }
  
  #info p {
    margin: 0;
    line-height: 1.5;
  }
  
  #info p:first-of-type {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 20px;
  }
  
  #connectBtn {
    background-color: #fff;
    color: #007bff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    margin-top: 20px;
    cursor: pointer;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.2s ease-out;
  }
  
  #connectBtn:focus,
  #connectBtn:hover {
    background-color: #007bff;
    color: #fff;
  }
  
  canvas {
    width: 100%;
    margin-top: 20px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
  }
  <style>
    body {
    font-size: 16px;
    font-family: 'Helvetica Neue', sans-serif;
    color: #fff;
    margin: 0;
    padding: 0;
    background-image: url('https://images.unsplash.com/photo-1560088199-d1caaec6fc52');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
  
  #app {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(5,129,253, 0.7);
    border: 2px solid #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.3);
  }
  
  h1 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 20px;
  }
  
  #info {
    border: none;
    padding: 10px;
    text-align: center;
    margin-top: 20px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
  }
  
  #info p {
    margin: 0;
    line-height: 1.5;
  }
  
  #info p:first-of-type {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 20px;
  }
  
  #connectBtn {
    background-color: #fff;
    color: #007bff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    margin-top: 20px;
    cursor: pointer;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.2s ease-out;
  }
  
  #connectBtn:focus,
  #connectBtn:hover {
    background-color: #007bff;
    color: #fff;
  }
  
  canvas {
    width: 100%;
    margin-top: 20px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
  }
  
  </style>
  </body>
</html>
